<template>
	<view class="">
		<u-navbar title="华安应急智慧物联设备平台" @leftClick="leftClick" :autoBack="true" placeholder="true"></u-navbar>
		<view class="changePassword-box">
			<view class="changePassword-box-title ff-font-15 ff-font-weight-600">修改密码</view>
			<view class="changePassword-box-content ff-padding-14 ff-bg-fff">
				<view class="ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
					<view class="changePassword-box-content-title ident">旧密码</view>
					<input v-model.trim="params.oldPassword" type="text" class="ff-padding-left-50" placeholder-style="color:#999" placeholder="请输入" />
				</view>
				<view class="ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15 ff-relative">
					<view class="changePassword-box-content-title ident">新密码</view>
					<input
						v-model.trim="params.newPassword"
						type="text"
						:password="params.showPassword"
						class="ff-padding-left-50"
						placeholder-style="color:#999"
						placeholder="请输入"
					/>
					<view class="eyeBox"><u-icon color="#999" :name="[params.showPassword ? 'eye-fill' : 'eye-off']" @click="showPwd(1)"></u-icon></view>
				</view>
				<view class="ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15 ff-relative">
					<view class="changePassword-box-content-title ident">确认新密码</view>
					<input
						v-model.trim="params.newPassword1"
						type="text"
						:password="params.showPassword1"
						class="ff-padding-left-20"
						placeholder-style="color:#999"
						placeholder="请输入"
					/>
					<view class="eyeBox"><u-icon color="#999" :name="[params.showPassword1 ? 'eye-fill' : 'eye-off']" @click="showPwd(2)"></u-icon></view>
				</view>
			</view>
		</view>

		<view class="changePassword-but"><u-button @click="changePasswordSubmit" type="primary" text="修改密码"></u-button></view>
		<f-loading ref="loading" />
		<f-uToast ref="uToast" />
	</view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
const { state, commit, dispatch } = useStore();
const { proxy } = getCurrentInstance();

// 密码的小眼睛效果
let showPwd = e => {
	if (e == 1) {
		params.showPassword = !params.showPassword;
	} else if (e == 2) {
		params.showPassword1 = !params.showPassword1;
	}
};

// 修改密码系列
let uToast = ref(null);
const loading = ref(null);
let params = reactive({
	oldPassword: '', // 旧密码
	newPassword: '', // 新密码1
	newPassword1: '', // 新密码2
	showPassword: true, // 小眼睛1
	showPassword1: true // 小眼睛2
});
let changePasswordSubmit = async () => {
	if (!params.oldPassword) {
		uToast.value.openuToastError('旧密码不能为空'); // 打开loading
		return;
	}
	if (!params.newPassword) {
		uToast.value.openuToastError('新密码不能为空'); // 打开loading
		return;
	}
	if (!params.newPassword1) {
		uToast.value.openuToastError('确认新密码不能为空'); // 打开loading
		return;
	}
	if (params.newPassword != params.newPassword1) {
		uToast.value.openuToastError('俩次密码不一致，请重新输入'); // 打开loading
		return;
	}
	uni.showModal({
		title: '',
		content: '是否确定修改密码？',
		confirmColor: '#2954FD',
		showCancel: true,
		success: function(res) {
			if (res.confirm) {
				let dat = {
					oldPassword: proxy.$md5(params.oldPassword), // 旧密码
					newPassword: proxy.$md5(params.newPassword), // 新密码1
					newPassword1: proxy.$md5(params.newPassword1) // 新密码2
				};
				let header = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' };
				proxy.$http.post({ url: '/install/update-password', data: dat, header: header }).then(data => {
					// console.log('修改密码返回的数据--------', data);
					loading.value.closeLoading(); // 关闭loading
					if (data.code == 200) {
						uToast.value.openuToastSuccess(data.msg); // 打开loading
						uni.clearStorageSync(); // 清空本地所有的缓存数据
						setTimeout(() => {
							proxy.$pageJump.reLaunch('/pages/views/loginRegister/login/Login');
						}, 200);
					} else {
						uToast.value.openuToastError(data.msg); // 打开loading
					}
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};
</script>

<style scoped lang="scss">
.changePassword {
	&-box {
		&-title {
			position: relative;
			padding: 40rpx;
		}
		&-title::before {
			content: '';
			width: 8rpx;
			height: 30rpx;
			background-color: #2954fd;
			position: absolute;
			left: 20rpx;
		}
		.eyeBox {
			position: absolute;
			right: 0;
		}
	}

	&-but {
		width: 90%;
		margin: 60rpx 5%;
	}
}
</style>
